<template>
    <div>
      <!-- 导航栏 -->
      <NavBar />
  
      <!-- 用户管理标题 -->
      <div class="admin-header">
        <h2>User Management</h2>
        <div>
          <button class="batch-ban-btn" @click="batchBanUsers" :disabled="selectedUsers.length === 0">
          Batch Ban
        </button>
        <button class="batch-unban-btn" @click="batchUnbanUsers" :disabled="selectedUsers.length === 0">
          Batch Unban
        </button>
        </div>
        
      </div>
  
      <!-- 用户列表 -->
      <div class="user-list">
        <table v-if="users.length > 0" class="user-table">
          <thead>
            <tr>
              <th><input type="checkbox" @change="toggleSelectAll" :checked="isAllSelected" /></th>
              <th>Username</th>
              <th>Password</th>
              <th>Nickname</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.userName">
              <td><input type="checkbox" v-model="selectedUsers" :value="user.userName" /></td>
              <td>{{ user.userName }}</td>
              <td>
                <span 
                  class="password-cell" 
                  @mouseover="showPassword($event, user.password)" 
                  @mouseleave="hidePassword($event)"
                >
                  ******
                </span>
              </td>
              <td>{{ user.nickName }}</td>
              <td class="actions-cell">
                <button 
                  v-if="user.isBanned" 
                  class="unban-btn" 
                  @click="unbanUser(user.userName)"
                >
                  Unban
                </button>
                <button 
                  v-else 
                  class="ban-btn" 
                  @click="banUser(user.userName)"
                >
                  Ban
                </button>
                <button class="details-btn" @click="showUserDetails(user)">Details</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-else>No users available</div>
      </div>
  
      <!-- 单个用户详情 -->
      <AdminSingleUserView v-if="selectedUser" :user="selectedUser" @close="selectedUser = null" />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from "vue";
  import { getAllUsernames, banUser as banUserApi, unbanUser as unbanUserApi } from "@/api/user";
  import NavBar from "@/components/NavBar.vue";
  import AdminSingleUserView from "@/components/AdminSingleUser.vue";
  
  const users = ref([]);
  const selectedUsers = ref([]);
  const selectedUser = ref(null);
  
  const fetchUsers = async () => {
    try {
      const response = await getAllUsernames();
      console.log("Fetched users:", response);
      users.value = response; // 确保 response 是一个数组
    } catch (error) {
      console.error("Failed to fetch usernames", error);
    }
  };
  
  const showPassword = (event, password) => {
    event.target.textContent = password;
  };
  
  const hidePassword = (event) => {
    event.target.textContent = "******";
  };
  
  const toggleSelectAll = (event) => {
    if (event.target.checked) {
      selectedUsers.value = users.value.map(user => user.userName);
    } else {
      selectedUsers.value = [];
    }
  };
  
  const batchBanUsers = async () => {
    try {
      console.log("Batch banning users:", selectedUsers.value);
      await Promise.all(selectedUsers.value.map(userName => banUserApi(userName)));
      selectedUsers.value = [];
      fetchUsers(); // 重新获取用户列表
    } catch (error) {
      console.error("Failed to batch ban users:", error);
    }
  };
  
  const batchUnbanUsers = async () => {
    try {
      console.log("Batch unbanning users:", selectedUsers.value);
      await Promise.all(selectedUsers.value.map(userName => unbanUserApi(userName)));
      selectedUsers.value = [];
      fetchUsers(); // 重新获取用户列表
    } catch (error) {
      console.error("Failed to batch unban users:", error);
    }
  };
  
  const banUser = async (userName) => {
    try {
      console.log("Banning user:", userName);
    //   const response = await banUserApi(userName);
      console.log("Banning user:", userName);
      fetchUsers(); // 重新获取用户列表
    } catch (error) {
      console.error("Failed to ban user:", error);
    }
  };
  
  const unbanUser = async (userName) => {
    try {
      console.log("Unbanning user:", userName);
      await unbanUserApi(userName);
      fetchUsers(); // 重新获取用户列表
    } catch (error) {
      console.error("Failed to unban user:", error);
    }
  };
  
  const showUserDetails = (user) => {
    selectedUser.value = user;
  };
  
  const isAllSelected = computed(() => {
    return selectedUsers.value.length === users.value.length && users.value.length > 0;
  });
  
  onMounted(fetchUsers);
  </script>
  
  <style scoped>
  .admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto;
    width: 80%;
    max-width: 1000px;
  }
  
  .batch-ban-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .batch-ban-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .batch-unban-btn {
    background-color: #2ecc71;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
  }
  
  .batch-unban-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .user-list {
    width: 80%;
    max-width: 1000px;
    margin: 20px auto;
  }
  
  .user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  
  .user-table th,
  .user-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
  }
  
  .user-table th {
    background-color: #f4f4f4;
    font-weight: bold;
  }
  
  .user-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .user-table tr:hover {
    background-color: #f1f1f1;
  }
  
  .password-cell {
    cursor: pointer;
  }
  
  .ban-btn {
    background-color: #e74c3c;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .ban-btn:hover {
    background-color: #c0392b;
  }
  
  .unban-btn {
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .unban-btn:hover {
    background-color: #27ae60;
  }
  
  .details-btn {
    background-color: #3498db;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .details-btn:hover {
    background-color: #2980b9;
  }
  
  </style>